import React, {Component} from 'react';
import './index.less';
import {Form, Input, Select, Button, Modal} from 'antd';
import {reqRecharge} from '../../api/index'

const {Option} = Select;

/*
* 充值路由*/
class PriceInput extends Component {
    static getDerivedStateFromProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            return {
                ...(nextProps.value || {}),
            };
        }
        return null;
    }

    constructor(props) {
        super(props);
        const value = props.value || {};
        this.state = {
            number: value.number || 0,
            currency: value.currency || 'rmb',
        };
    }

    handleNumberChange = e => {
        const number = parseInt(e.target.value || 0, 10);
        if (isNaN(number)) {
            return;
        }
        if (!('value' in this.props)) {
            this.setState({number});
        }
        this.triggerChange({number});
    };

    handleCurrencyChange = currency => {
        if (!('value' in this.props)) {
            this.setState({currency});
        }
        this.triggerChange({currency});
    };

    triggerChange = changedValue => {
        // Should provide an event to pass value to Form.
        const {onChange} = this.props;
        if (onChange) {
            onChange({
                ...this.state,
                ...changedValue,
            });
        }
    };

    render() {
        const {size} = this.props;
        const {currency, number} = this.state;
        return (
            <span>
        <Input
            type="text"
            size={size}
            value={number}
            onChange={this.handleNumberChange}
            style={{width: '65%', marginRight: '3%'}}
        />
        <Select
            value={currency}
            size={size}
            style={{width: '32%'}}
            onChange={this.handleCurrencyChange}
        >
          <Option value="rmb">元</Option>
        </Select>
      </span>
        );
    }
}

class Demo extends React.Component {
    state = {
        ModalText: '',
        visible: false,
        confirmLoading: false,
        amout:0
    };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = async () => {
        const amout=this.state.amout
        const result=await reqRecharge(amout)
        this.setState({
            ModalText: '充值已提交！稍后会有南京市夏洛云网络科技有限公司客服联系您！',
            confirmLoading: true,
            amout: ''
        });
        setTimeout(() => {
            this.setState({
                visible: false,
                confirmLoading: false,
            });
        }, 3000);
    };

    handleCancel = () => {
        console.log('Clicked cancel button');
        this.setState({
            visible: false,
        });
    };

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const amout=values.amout.number
                this.setState({
                    amout:amout,
                    ModalText:'提交工单后，将有客服人员与您联系，确认充值'+amout+'元？'
                })
                this.showModal()
            }
        });
    };

    checkPrice = (rule, value, callback) => {
        if (value.number > 0) {
            callback();
            return;
        }
        callback('充值金额必须大于0！');
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const {visible, confirmLoading, ModalText,amout} = this.state;
        return (
            <div className="recharge">
                <div className="title">
                    <div>账户名称：</div>
                    <div>南京市夏洛云网络科技有限公司</div>
                </div>
                <div className="title">
                    <div>开户银行：</div>
                    <div>招商银行股份有限公司南京江宁支行</div>
                </div>
                <div className="title">
                    <div >账户号码：</div>
                    <div>125910816910301</div>
                </div>
                <div className="title">
                    <Form layout="inline" onSubmit={this.handleSubmit}>
                        <Form.Item label="充值金额">
                            {getFieldDecorator('amout', {
                                initialValue: {number: 0, currency: 'rmb'},
                                rules: [{validator: this.checkPrice}],
                            })(<PriceInput/>)}
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                提交充值工单
                            </Button>
                        </Form.Item>
                    </Form>
                    <Modal
                        title="提交工单"
                        visible={visible}
                        onOk={this.handleOk}
                        confirmLoading={confirmLoading}
                        onCancel={this.handleCancel}
                    >
                        <p>{ModalText}</p>
                    </Modal>
                </div>
            </div>
        );
    }
}

const WrappedDemo = Form.create({name: 'customized_form_controls'})(Demo);
export default WrappedDemo;
